<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="layout/default">
<head>
    <meta charset="UTF-8"/>
    <title th:text="#{profilePage.title}">Title</title>
</head>
<body>
<div class="row" layout:fragment="content">
    <h2 class="indigo-text center" th:text="#{profilePage.title}">个人资料</h2>
    <div class="col s12 center red-text" th:text="${error}" th:if="${error}">Error uploading picture</div>
    <div class="col m8 s12 offset-m2">
        <img th:src="@{/uploadedPicture}" width="100" height="100"/>
        <span th:text="|${profileForm.loginType}#{profilePage.loginType}|">loginType</span>
    </div>
    <form th:action="@{/upload}" method="post" enctype="multipart/form-data" >
        <div class="row">
            <div class="file-field input-field col s10 m6 offset-m2">
                <div class="btn waves-effect waves-light">
                    <span th:text="#{profilePage.chooseFile}">File</span>
                    <input type="file" id="file" name="file"/>
                </div>
                <div class="file-path-wrapper">
                    <input class="file-path validate" type="text"/>
                </div>
            </div>
            <div class="col s2">
                <button class="btn waves-effect waves-light" type="submit" name="save" th:text="#{profilePage.savePicture}">submit<i class="material-icons right">send</i> </button>
            </div>
        </div>
    </form>
    <form th:action="@{/profile}" th:object="${profileForm}" method="post" class="col m8 s12 offset-m2">
        <div class="row">
            <div class="input-field col s6 m4">
                <input th:field="${profileForm.userName}" id="userName" required="required" type="text" th:errorclass="invalid"/>
                <label for="userName" th:text="#{profilePage.userName}">用户名</label>
                <div th:errors="*{userName}" class="red-text">Error</div>
            </div>
            <div class="input-field col s6 m4">
                <input th:field="${profileForm.email}" id="email" required="required" type="email" th:errorclass="invalid"/>
                <label for="email" th:text="#{profilePage.email}">电子邮件</label>
                <div th:errors="*{email}" class="red-text">Error</div>
            </div>
            <div class="input-field col s6 m4">
                <input th:field="${profileForm.birthDate}" id="birthDate" required="required" type="text" th:placeholder="${dateFormat}" th:errorclass="invalid"/>
                <label for="birthDate" th:text="#{profilePage.birthDate}">出生日期</label>
                <div th:errors="*{birthDate}" class="red-text">Error</div>
            </div>
        </div>
        <fieldset class="row">
            <legend th:text="#{profilePage.tastes.legend}">您的兴趣</legend>
            <button class="btn teal" type="submit" name="addTaste" th:text="#{profilePage.tastes.addTaste}">
                添加兴趣<i class="material-icons left">add</i>
            </button>
            <div th:errors="*{tastes}" class="red-text">Error</div>
            <div class="row" th:each="row,rowStat : ${profileForm.tastes}">
                <div class="col s6">
                    <input type="text" th:field="${profileForm.tastes[__${rowStat.index}__]}" required="required" th:placeholder="#{profilePage.tastes.placeholder}"/>
                </div>
                <div class="col s6">
                    <button class="btn red" type="submit" name="removeTaste" th:value="${rowStat.index}" th:text="#{profilePage.tastes.removeTaste}">
                        删除兴趣<i class="material-icons right waves-effect">delete</i>
                    </button>
                </div>
            </div>
        </fieldset>
        <div class="row s12 center">
            <button class="btn waves-effect waves-light" type="submit" name="save" th:utext="#{profilePage.save}">Submit
                <i class="material-icons right">save</i>
            </button>
        </div>
    </form>
</div>
<script layout:fragment="script">
    $('button').bind('click', function(e) {
        if(e.currentTarget.name === 'save') {
            $(e.currentTarget.form).removeAttr('novalidate');
        } else {
            $(e.currentTarget.form).attr('novalidate', 'novalidate');
        }
    });
</script>
</body>
</html>